import React from "react";
import {Card, message} from "antd";
import Store from "./Store";
import SearchForm from "../../../components/index/SearchForm";
import {observer} from "mobx-react";
import ActionModal from "../../../components/index/ActionModal";
import ActionDiv from "../../../components/index/ActionDiv";
import ActionTable from "../../../components/index/ActionTable";
import ActionCard from "../../../components/index/ActionCard";
import ActionVikocCard from "../../../components/index/ActionVikocCard";

@observer
class Index extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            reload:false
        }
    }

    componentDidMount() {
        let uri = this.getUri();
        if (uri){
            Store.uri = uri;
            Store.fetchRecords();
        }
    }

    getUri = (nextProps = null) => {
        let uri = nextProps ? nextProps.match.params.uri : this.props.match.params.uri;
        let url = window.location.href;
        // 找到问号的位置
        const questionMarkIndex = url.indexOf('?');

        // 检查是否找到了问号
        if (questionMarkIndex !== -1) {
            // 提取问号后面的部分
            const queryString = url.substring(questionMarkIndex);
            if (uri){
                return '/' + uri.replace(/\./g,"\/")+queryString;
            }
        }

        if (uri){
            return '/' + uri.replace(/\./g,"\/");
        }else {
            message.error("uri缺失")
            return false;
        }
    };

    //解决参数改变组件不更新的问题
    //此生命周期方法在以下情况会被调用：
    // 组件接收到新的props：当一个已挂载的组件即将接收新的props时，React会调用此方法。这允许组件在React使用新的props重新渲染之前，基于这些新的props进行一些预处理或者更新组件的内部状态。
    // 首次渲染不会被调用：需要注意的是，这个方法在组件的首次渲染时并不会被调用，它仅在后续的props更新时触发。
    componentWillReceiveProps = (nextProps) => {
        let new_uri = this.getUri(nextProps);
        if (Store.uri !== new_uri){
            Store.uri = new_uri;
            Store._init();
            Store.fetchRecords()
        }

    };

    render() {
        return (
            <Card >
                {/*搜索表单*/}
                <SearchForm config={Store.searchConfig}/>

                {/*表格外的操作*/}
                <ActionDiv config={Store.actionDivConfig}/>

                {/*表格*/}
                {
                    Store.tableType === 'table' ?  <ActionTable /> :
                        Store.tableType === 'vikoc_card' ? <ActionVikocCard />: <ActionCard />
                }

                {/*弹窗,Store状态变更时，才执行ActionModal，即modalVisible变更时，同时变更configUri，configParams即可创建新的表单。*/}
                {
                    Store.modalVisible && <ActionModal configUri={Store.configUri} configParams={Store.configParams}/>
                }
            </Card>
        )
    }
}

export default Index;
